<h1 class="layui-inline">角色管理</h1>
<button id="btn_add" class="layui-btn layui-btn-sm" style="margin: 10px; float:right;">新增角色</button>
<hr class="layui-bg-black">
<table id="tb_users" class="layui-table" lay-filter="users">
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $("#btn_add").click(function () {
        layer.prompt({
            title: '新增角色'
        }, function (value, index) {
            var load = layer.load(1, {shade: 0.3});
            $.get("/auth/add.do", {name: value}, function (data) {
                layer.close(load);
                if (data.code == 1) {
                    layui.table.reload('idTest');
                    layer.msg("新增成功!", {icon: 1});
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            });
            layer.close(index);
        });
    });
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#tb_users',
            url: "/auth/users.do",
            page: true,
            id: 'idTest',
            cols: [[
                {field: 'id', width: 180, sort: true, title: 'ID'},
                {field: 'name', sort: true, title: '角色名'},
                {fixed: 'right', width: 180, align: 'center', title: '操作', toolbar: '#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(users)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var load = layer.load(1, {shade: 0.3});
                    $.get("/auth/del.do", {id: data.id}, function (data) {
                        layer.close(load);
                        if (data.code == 1) {
                            layui.table.reload('idTest');
                            layer.msg("删除成功!", {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    title: '角色名修改',
                    value: data.name,
                }, function (value, index) {
                    var load = layer.load(1, {shade: 0.3});
                    $.get("auth/edit.do", {id: data.id, name: value}, function (data) {
                        layer.close(load);
                        if (data.code == 1) {
                            layui.table.reload('idTest');
                            layer.msg("修改成功!", {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>